<template>
  <div class="app">
    <visual-editor
      v-model="jsonData"
      :config="visualConfig"
      :formData="formData"
      :customProps="customProps"
    >
      <template #commodityPic>
        <img :src="getCommodityPic" fit="fill" />
      </template>
    </visual-editor>

    <div style="text-align: center; margin: 30px">
      {{ JSON.stringify(formData) }}
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { VisualEditor } from "@/packages/visual-editor";
import { visualConfig } from "@/visual.config";
import jsonData from "./data.json";

export default defineComponent({
  name: "App",
  data() {
    return {
      visualConfig,
      jsonData,
      formData: {
        username: "admin",
        commodity: "",
      },
      customProps: {
        confirm: {
          onClick: (e) => {
            e.stopPropagation();
            this.$notify({ message: "执行表单数据校验及提交到服务的动作" });
          },
        },
        commodity: {
          onChange: (val) => {
            this.$notify({ message: `选择商品：${val}` });
            // this.formData.acctType = null;
          },
        },
      },
    };
  },
  components: {
    VisualEditor,
  },
  computed: {
    getCommodityPic() {
      const commodity = this.formData.commodity || "";
      if(!commodity){
        return "https://misc.360buyimg.com/jdf/1.0.0/unit/global-header/5.0.0/i/jdlogo-201708-@1x.png"
      }
      const picMap = {
        shuma:
          "https://img14.360buyimg.com/n7/jfs/t1/169373/1/1690/82585/5ff823e7Eeee14782/060d7b4b17b6e734.jpg",
        linsi:
          "https://img14.360buyimg.com/n7/jfs/t1/153235/10/11837/274912/5fe85301E9ae2a970/d9723e8a07603c19.jpg",
        clothes:
          "https://img10.360buyimg.com/n7/jfs/t1/139381/24/10110/108830/5f7e119eEf5f9b2b1/91a45b1450a5f89e.jpg",
      };
      return picMap[commodity];
    },
  },
});
</script>

<style lang="scss">
html,
body {
  margin: 0;
  padding: 0;
}
.app {
  padding-bottom: 300px;
}
</style>
